<template>
  <div class="addressContainer">
    <!-- 版头 -->
    <van-nav-bar
      title="我的地址"
      left-arrow
      @click-left="$router.back()"
      style="background: #e11c34"
    />
    <!-- 具体地址 -->
    <van-swipe-cell v-for="(item, index) in list" :key="item.id">
      <van-cell @click="aaa(item, index)">
        <template #title>
          <span>{{ item.name }}</span>
          <span class="telephone">{{ item.mobile }}</span>
        </template>
        <template #label>
          <div class="downSetting">
            <div class="defBtn" v-if="item.is_default">默认</div>
            <div class="address">
              <span>{{ item.full_region }}</span>
              <span>{{ item.address }}</span>
            </div>
          </div>
        </template>
      </van-cell>
      <template #right>
        <van-button
          @click="delBtn(item.id)"
          class="rightSwiperCell"
          square
          type="danger"
          text="删除"
        />
        <van-button
          class="rightSwiperCell"
          @click="$router.push('/editAddress1/' + item.id)"
          square
          type="primary"
          text="修改"
        />
      </template>
    </van-swipe-cell>

    <!-- 底部新建 -->
    <van-button type="danger" block @click="$router.push('/editAddress')">
      新建 +
    </van-button>
  </div>
</template>

<script>
import { getAddressListData, deleteEditAddressData } from "@/api/han/address";
export default {
  name: "Address",
  data() {
    return {
      list: [], // 地址列表
    };
  },
  methods: {
    // 删除地址
    async delBtn(id) {
      console.log(id);
      await this.$dialog
        .confirm({
          title: "标题",
          message: "确认删除？",
        })
        .then(async () => {
          // on close
          await deleteEditAddressData({ id: id });
          this.$toast.success("删除成功");
        })
        .catch(() => {
          // on cancel
        });
      this.initData();
    },
    async initData() {
      let { data } = await getAddressListData();
      console.log(data);
      this.list = data.data;
    },
    aaa(val, idx) {
      if (this.$route.query.id) {
        // console.log(val.id);
        this.$router.push({ path: "/checkout", query: { addressId: val.id } });
      }
    },
  },
  created() {
    this.initData();
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  height: 150px;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
/deep/ .van-button--block {
  position: fixed;
  bottom: 0px;
}
.downSetting {
  height: 50px;
  display: flex;
  justify-content: start;
  align-items: center;
}
/deep/ .van-cell__label {
  font-size: 26px;
  // margin-top: 20px;
  // color: #7a7a76;
}
.defBtn {
  border: 3px solid #e11c34;
  padding: 5px;
  color: #e11c34;
}
.address {
  position: absolute;
  left: 200px;
  color: #000;
}
.telephone {
  position: absolute;
  left: 200px;
}
.rightSwiperCell {
  height: 100%;
}
</style>
